<template>
  <div class="search-box">
    <el-form 
      inline 
      :model="searchForm" 
      ref="searchForm" 
      :label-width="labelWidth"
      class="search-form"
    >
      <!-- 动态渲染表单项：根据父组件传入的formItems配置 -->
      <el-form-item 
        v-for="(item, index) in formItems" 
        :key="index" 
        :label="item.label"
      >
        <!-- 输入框类型 -->
        <el-input 
          v-if="item.type === 'input'"
          v-model="searchForm[item.key]" 
          :placeholder="item.placeholder" 
          clearable 
          :style="{ width: item.width || '200px' }"
          @keyup.enter.native="handleSearch" 
        />

        <!-- 日期范围类型 -->
        <el-date-picker
          v-else-if="item.type === 'dateRange'"
          type="daterange"
          range-separator="至"
          :start-placeholder="item.startPlaceholder || '开始日期'"
          :end-placeholder="item.endPlaceholder || '结束日期'"
          v-model="searchForm[item.key]"
          :value-format="item.format || 'yyyy-MM-dd'"
          clearable
          :style="{ width: item.width || '320px' }"
        />

        <!-- 下拉框类型（可扩展） -->
        <el-select
          v-else-if="item.type === 'select'"
          v-model="searchForm[item.key]"
          :placeholder="item.placeholder || '请选择'"
          clearable
          :style="{ width: item.width || '200px' }"
        >
          <el-option 
            v-for="opt in item.options" 
            :key="opt.value" 
            :label="opt.label" 
            :value="opt.value"
          />
        </el-select>
      </el-form-item>

      <!-- 操作按钮（可自定义） -->
      <el-form-item>
        <el-button 
          type="primary" 
          :icon="searchBtn.icon || 'el-icon-search'"
          @click="handleSearch"
          :loading="isSearching"
        >
          {{ searchBtn.text || "查询" }}
        </el-button>
        <el-button 
          :icon="resetBtn.icon || 'el-icon-refresh'"
          @click="handleReset"
          style="margin-left: 10px"
        >
          {{ resetBtn.text || "重置" }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "CommonSearchBox", // 通用查询组件
  props: {
    // 核心：表单项配置（父组件传入，决定渲染什么内容）
    formItems: {
      type: Array,
      required: true, // 必须传入，定义查询项
      example: [
        {
          type: "input", // 类型：输入框
          key: "title", // 绑定的字段名（用于收集值）
          label: "文章标题", // 标签文字
          placeholder: "请输入标题关键词", // 占位符
          width: "200px" // 宽度
        },
        {
          type: "dateRange", // 类型：日期范围
          key: "dateRange", // 绑定的字段名
          label: "发布时间" // 标签文字
        }
      ]
    },
    // 查询按钮配置
    searchBtn: {
      type: Object,
      default: () => ({ text: "查询", icon: "el-icon-search" })
    },
    // 重置按钮配置
    resetBtn: {
      type: Object,
      default: () => ({ text: "重置", icon: "el-icon-refresh" })
    },
    // 标签宽度
    labelWidth: {
      type: String,
      default: "80px"
    }
  },
  data() {
    return {
      // 搜索表单数据：根据formItems的key动态生成字段
      searchForm: this.initSearchForm(),
      isSearching: false // 搜索加载状态
    };
  },
  methods: {
    // 初始化搜索表单：根据formItems的key创建空字段
    initSearchForm() {
      const form = {};
      this.formItems.forEach(item => {
        form[item.key] = ""; // 输入框/下拉框默认空
        if (item.type === "dateRange") {
          form[item.key] = []; // 日期范围默认空数组
        }
      });
      return form;
    },

    // 处理搜索：格式化参数并传递给父组件
    handleSearch() {
      this.isSearching = true;
      // 格式化参数：只传递有值的字段（适配后端接口）
      const searchParams = {};
      this.formItems.forEach(item => {
        const value = this.searchForm[item.key];
        if (value === "" || value === undefined || value === null) return;

        // 特殊处理日期范围（拆分为startDate和endDate）
        if (item.type === "dateRange" && value.length === 2) {
          searchParams[`${item.key}Start`] = value[0]; // 如dateRangeStart
          searchParams[`${item.key}End`] = value[1];   // 如dateRangeEnd
        } else {
          // 普通字段直接传递（如title: "xxx"）
          searchParams[item.key] = item.type === "input" ? value.trim() : value;
        }
      });

      // 传递参数给父组件
      this.$emit("search", searchParams);

      // 延迟关闭加载状态
      setTimeout(() => {
        this.isSearching = false;
      }, 300);
    },

    // 重置搜索
    handleReset() {
      this.$refs.searchForm.resetFields();
      // 手动重置日期范围（部分版本需要）
      this.formItems.forEach(item => {
        if (item.type === "dateRange") {
          this.searchForm[item.key] = [];
        }
      });
      this.$emit("reset");
    }
  },
  // 监听formItems变化：动态更新表单字段（如果父组件动态修改配置）
  watch: {
    formItems: {
      deep: true,
      handler() {
        this.searchForm = this.initSearchForm();
      }
    }
  }
};
</script>

<style scoped>
.search-box {
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: flex-start;
  }
  .el-input, .el-date-picker, .el-select {
    width: 100% !important;
  }
}
</style>